<template>
  <div class="columns-container">
    <split-pane split="vertical" :min-percent="15" :default-percent="20" @resize="resize">
      <template slot="paneL">
        <div class="app-page">
          <!-- 头 -->
          <div class="app-header">
            <div class="app-title">
              <i class="el-icon-folder"></i> 产品分类
            </div>
            <div class="app-tools">
              <el-button type="text" icon="el-icon-plus" size="small" @click="addTreeHandle">
                添加
              </el-button>
            </div>
          </div>
          <!-- 树 -->
          <div class="tree-box">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              highlight-current
              node-key="_id"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" :title="node.label" class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span class="tree-node-handle">
                  <el-button
                    type="text"
                    class="app-success-text"
                    size="mini"
                    title="编辑"
                    icon="fa fa-pencil"
                    @click.stop="() => updateTreeHandle(data)"
                  >
                  </el-button>
                  <el-button
                    type="text"
                    class="app-danger-text"
                    size="mini"
                    title="删除"
                    icon="fa fa-trash-o"
                    @click.stop="() => delTreeHandle(data._id)"
                  >
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template slot="paneR">
      </template>
    </split-pane>
    <ruleFormDialog v-if="dialogVisible" :visible.sync="dialogVisible" :detail-data="detailData" :is-edit="isEdit" @success="successHandle"></ruleFormDialog>
  </div>
</template>

<script>
import splitPane from 'vue-splitpane'
// import { productCategoryListall, productCategoryRemove } from '@/api/productCategory.js'
import { getData, remove } from '@/mock/index'

import { arrayToTree, sortTreeByField } from '@/utils/tree.js'

import ruleFormDialog from './children/ruleFormDialog'

export default {
  name: 'ColumnsCategoryEdit',
  components: {
    splitPane,
    ruleFormDialog
  },
  data () {
    return {
      // 分类弹窗显示
      dialogVisible: false,
      // 详情数据
      detailData: {},
      // 是否是编辑
      isEdit: false,
      // 机构树
      treeData: [],
      // 树配置
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    // 获取树数据
    this.getTreeData()
  },
  methods: {
    /**
     * 架构
     */
    resize () {
      console.log('resize')
    },
    /**
     * 左边
     */
    // 增加
    addTreeHandle () {
      this.dialogVisible = true
      this.isEdit = false
      this.detailData = {}
    },
    // 编辑
    updateTreeHandle (row) {
      this.dialogVisible = true
      this.isEdit = true
      this.detailData = row
    },
    // 删除
    delTreeHandle (id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id })
        if (res.code === '0000') {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 更新表格
          this.getTreeData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加分类成功
    successHandle () {
      this.getTreeData()
    },
    // 获取分类列表
    async getTreeData () {
      this.tableLoading = true
      // 模拟表格数据
      const tableData = [
        {
          enname: '',
          parent_name: '',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e66f8d9a9c278223cbb8b23',
          name: '一级分类',
          __v: 0
        },
        {
          enname: '',
          parent_name: '一级分类',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e66fb5c9de3e92b34bde6cd',
          parent_id: '5e66f8d9a9c278223cbb8b23',
          name: '二级分类1',
          __v: 0
        },
        {
          enname: '',
          parent_name: '二级分类1',
          description: '',
          sort: 1,
          thumbnail: '',
          status: '0',
          _id: '5e6708d1ba5977022480cf22',
          parent_id: '5e66fb5c9de3e92b34bde6cd',
          name: '三级分类',
          __v: 0
        },
        {
          enname: '',
          parent_name: '一级分类',
          description: '',
          sort: 2,
          thumbnail: '',
          status: '0',
          _id: '5e67081cba5977022480cf20',
          parent_id: '5e66f8d9a9c278223cbb8b23',
          name: '二级分类2',
          __v: 0
        }
      ]
      const res = await getData({}, tableData)
      this.tableLoading = false
      if (res.code === '0000') {
        const treeData = arrayToTree(res.data, [], '_id', 'parent_id')
        this.treeData = sortTreeByField(treeData, 'sort')
      }
    },
    // 折叠树
    foldTree () {
      this.isOpen = false
      this.toggleTree(false)
    },
    // 打开树
    openTree () {
      this.isOpen = true
      this.toggleTree(true)
    },
    // 切换tree的打开状态
    toggleTree (status) {
      console.log(this.$refs.tree.store._getAllNodes())
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = status
      }
    },
    handleNodeClick (data) {
      console.log(data)
      // const cid = data._id
      // this.$refs.listmain.query({ cid })
    }
  }
}
</script>

<style  scoped lang="scss">
.columns-container {
  height: 100%;
}

.left-container {
  background-color: #f38181;
  height: 100%;
}

.right-container {
  background-color: #fce38a;
  height: 100%;
  width: 200px;
}
.tree-box {
  padding: 10px;
  font-size: 14px;

  .custom-tree-node {
    display: inline-block;
    max-width: calc(100% - 60px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  .tree-node-handle {
    position: absolute;
    right: 10px;
    visibility: hidden;
    margin-top: -5px;
  }
}
.el-tree {
  .deep .el-tree-node__content {
    &:hover {
      .tree-node-handle {
        visibility: visible;
      }
    }
  }
}
</style>
